<template>
  <div class="content">

    <el-row type='flex' justify='space-between' align='middle' class='searchBox'>
      <el-col :span='20'>
        <el-row type='flex' justify='start'>
          <el-col :span='6'>
            <span class='labelSize'>企业名称：</span>
            <el-input style="width: 200px" v-model="model.checkedName" placeholder="企业名称" clearable/>
          </el-col>

          <el-col :span='10'>
            <span class='labelSize'>巡排查时间：</span>
            <el-date-picker v-model="checkTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              align="right">
            </el-date-picker>
          </el-col>

        </el-row>
      </el-col>

      <el-col :span='4'>
        <!-- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-edit" @click="add"></el-button>
        <el-button type="primary" icon="el-icon-delete" @click="delBatch"></el-button> -->

        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="success" @click="add">新增</el-button>
        <el-button type="danger" @click="delBatch">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row :gutter='20'>
      <!-- table -->
      <el-col :span="18">
          <el-table class="tableForm" ref="multipleTable" :data="dataList" v-loading="tableloading" border :highlight-current-row="true"
          @cell-click="tableColumnClick" @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column width='50' align='center' type="index" label="序号" :index="indexMethod"></el-table-column>

            <el-table-column prop="checkedUnitName" label="企业名称" align="center"></el-table-column>
            <el-table-column prop="state" label="巡排查结果" align="center">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.state ? 'green':'red'}" >{{scope.row.state? "合格": "不合格"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="checkTime" label="巡排查时间" align="center"></el-table-column>
            <el-table-column prop="attachmentIdAttr" label="记录文件" align="center">
                <template slot-scope="scope">
                  <el-link v-for="item, index in scope.row.attachmentIdAttr" :key="index" type="primary" @click="preViewFile(item)">{{item.name + "&nbsp;&nbsp;"}} </el-link>
                </template>
            </el-table-column>

            <el-table-column prop="resultState" label="整改结果" align="center">
              <template slot-scope="scope">
                <span v-if="!scope.row.state" :style="{ color: scope.row.resultState ? 'green':'red'}" >{{ scope.row.resultState ? "已整改完成": "未整改完成"}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>

          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="model.current"
            :page-sizes="[10, 20, 30]"
            :page-size="model.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="model.total"
          ></el-pagination>
      </el-col>

      <!-- 不合格项 -->
      <el-col :span="6">
         <el-card class="box-card" :body-style="{height: '490px', overflowY: 'auto'}">
          <div slot="header" class="clearfix">
            <span>不合格项</span>
          </div>

          <div v-if="dataItemList.length == 0">
            <el-empty description="暂无数据"></el-empty>
          </div>
          <div v-else v-for="it in dataItemList" :key="it.id" class="text item">
            <el-card class="boxCard">
                <div slot="header" class='itemHead'>
                  <!-- <div><h4>{{it.name}}</h4></div> -->
                  <div style="font-weight: 700;">{{it.name}}</div>
                  <div>
                    <el-link type="info" v-if="it.resultState == 0" :underline="false">未开始</el-link>
                    <el-link type="primary" v-if="it.resultState == 1" :underline="false">进行中</el-link>
                    <el-link type="success" v-if="it.resultState == 2" :underline="false">已完成</el-link>
                    <!-- <span v-if="it.resultState == 1">进行中</span> -->
                  </div>
                </div>
                <div>
                  <div class="textItem">
                    <span>整改期限:</span> {{ it.rectifyDeadline }}
                  </div>
                  <div class="textItem">
                    <span>整改时间:</span> {{ it.rectifyTime || '--' }}
                  </div>
                  <div class="textItem">
                    <span>整改报告:</span>
                    <el-link v-for="itc in it.reportIdAttr" :key="itc.id" type="primary" @click="preViewFile(itc)">{{ itc.name+ "&nbsp;&nbsp;" }}</el-link>
                    <br />
                  </div>
                  <div class="textItem">
                    <span>整改成果:</span>
                    <el-link v-for="itc in it.resultIdAttr" :key="itc.id" type="primary" @click="preViewFile(itc)">{{ itc.name+ "&nbsp;&nbsp;" }}</el-link>
                    <br />
                    <!-- <span v-for="itc in it.resultIdAttr" :key="itc.id">{{ itc.name }}</span> -->
                  </div>
                </div>
                <div style='text-align: right'>
                  <el-button type="success" @click="editItemBox(it)">更新</el-button>
                </div>
            </el-card>
          </div>

        </el-card>
      </el-col>

    </el-row>

    <!-- 添加弹框 -->
    <add v-if="addVisible"></add>
    <!-- 编辑不合格项弹框 -->
    <editItem v-if="editItemVisible" :editItemCC="editItemCC"></editItem>

    <el-dialog
      title="预览文件"
      :visible.sync="preViewShow"
      width="70%"
      :before-close="()=>{this.preViewShow=false;}" :show-close="true" :close-on-click-modal="false"
      :close-on-press-escape="true"
      ref="documentPreviewDialog">
      <document-preview :previewInfo.sync="preViewInfo" style="width: 100%;height: 50rem"
                        ref="documentPreview"></document-preview>
    </el-dialog>

  </div>
</template>
<script>

import add from "./add";
import editItem from "./editItem";

import DocumentPreview from "@/components/common/DocumentPreview";

export default {
  components: {
    add, editItem, DocumentPreview
  },
  data() {
    return {
      dataList: [],
      dataItemList: [],
      tableloading: false,
      delList: [],

      initIndex: 0,

      checkTime: [],
      model: {
        checkedName: "",
        checkStartTime: "",
        checkEndTime: "",

        current: 1,
        size: 10,
        total: 0,
      },
      //添加
      addVisible: false,
      //编辑
      editItemVisible: false,
      editItemCC: {},

      preViewShow: false,
      preViewInfo: {},

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近半年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  created() {
    this.search();
  },
  mounted() {
    this.$ge.$on("biz-check-change-search", () => {
      this.addVisible = false;
      this.editVisible = false;
      this.editItemVisible = false;
      this.search();
    });
  },
  methods: {
    preViewFile(row) {
      console.log('12', row)
      this.preViewShow = true;
      this.preViewInfo = row;
      // this.$ge.$emit('preview-document-reload',true);
    },

    // 分页 ( 当页数量改变 )
    handleSizeChange(val) {
      this.model.size = val;
      this.search();
    },
    // 分页 （ 页码改变 ）
    handleCurrentChange(val) {
      this.model.current = val;
      this.search();
    },
    //查询对应不合格列表
    searchItem(relationId) {
      this.$get("/biz-check-items/list", {
        relationId: relationId
      })
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.dataItemList = result.data;
          }
        })
        .catch((error) => {
          //异常暂定为空
          this.dataItemList = [];
        });
    },
    //查询列表
    search() {
      this.tableloading = true;
      if(this.checkTime && this.checkTime.length > 0) {
        this.model.checkStartTime = this.checkTime[0];
        this.model.checkEndTime = this.checkTime[1];
      }else {
        this.model.checkStartTime = "";
        this.model.checkEndTime = "";
      }
      this.$get("/biz-check/pageList", this.model)
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.dataList = result.data.records;

            if(result.data.records && result.data.records.length > 0) {
              let that = this;
              this.searchItem(result.data.records[that.initIndex].id);
              that.$nextTick(() => {
                that.$refs['multipleTable'].setCurrentRow(that.dataList[that.initIndex]);
              })
            }else {
              this.dataItemList = [];
            }

            this.model.size = result.data.size;
            this.model.total = result.data.total;
            this.model.current = result.data.current;
          }
          this.tableloading = false;
        })
        .catch((error) => {
          //异常暂定为空
          this.dataList = [];
          this.tableloading = false;
        });
    },
    //添加
    add() {
      this.addVisible = true;
    },
    //编辑不合格项
    editItemBox(row) {
      this.editItemVisible = true;
      this.editItemCC = {
        id: row.id,
        reportIdAttr: row.reportIdAttr,
        resultIdAttr: row.resultIdAttr,
        rectifyTime: row.rectifyTime,
        resultState: row.resultState
      };
    },
    // 批量删除
    handleSelectionChange(val) {
      this.delList = val;
    },
    tableColumnClick(row, column, cell, event) {
      // this.initIndex = row.index;
      this.searchItem(row.id);
    },
    delBatch() {
      if(this.delList.length == 0) {
        this.$message.warning("请勾选列表左侧要删除的数据")
        return;
      }
      let ids = this.delList.map(item => item.id)
      this.$confirm(
        "删除后无法恢复是否确认删除？",
        "删除提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$postJson("/biz-check/delBatch", ids)
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.$refs.multipleTable.clearSelection();
                this.search();
              } else this.$message.error(result.msg);
            })
            .catch((error) => {
              //删除异常
              this.$message.error("删除异常");
            });
        })
        .catch(() => {
          //取消事件
        });
    },

  },
};
</script>
<style lang='scss' scoped>
  .boxCard{
    margin-bottom: 10px;
  }
  .textItem{
    margin-bottom: 10px;
    text-align: left;
  }
  .itemHead{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
